<template>
  <view class="content" v-if="shenheStatus == 0" @click="isShow = false">
    <view class="page-price">
      <view class="hd">
        <view class="hd-let">
          <view class="em">
            总计佣金(元)
            <i
              class="iconfont icon-browse"
              v-if="showMoney"
              @click="showMoney = !showMoney"
            ></i>
            <i
              class="iconfont icon-Notvisible"
              v-else
              @click="showMoney = !showMoney"
            ></i>
          </view>
          <view class="num num2">{{
            showMoney ? profit || "0.00" : "******"
          }}</view>
        </view>
      </view>

      <view class="bd">
        <view class="item">
          <view class="em">未释放佣金(元)</view>
          <view class="num">{{ no_send_profit || "0.00" }}</view>
        </view>

        <view class="item">
          <view class="em">已释放佣金(元)</view>
          <view class="num">{{ send_profit || "0.00" }}</view>
        </view>
      </view>
    </view>

    <view class="list">
      <view class="hd">
        <view class="hd-let"> 佣金明细 </view>
        <view class="hd-rig">
          <view class="select">
            <view class="selectName" @click.stop="isShow = !isShow">
              <view class="txt">佣金类型</view>
              <i class="iconfont icon-arrow-down"></i>
            </view>

            <view class="selectPop" v-if="isShow">
              <view class="box">
                <view
                  :class="['item', type === item.id ? 'on' : '']"
                  v-for="item of types"
                  :key="item.id"
                  @click.stop="changeType(item.id)"
                  >{{ item.title }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="item" v-for="item of list" :key="item.id">
        <view class="item-hd flex">
          <view class="let name">{{ item.name }}</view>
          <view class="num">+{{ item.amount }}</view>
        </view>
        <view class="item-bd flex">
          <view class="let time">{{ item.created_at }}</view>
          <view class="status" v-if="item.is_refund == 1">已退款</view>
          <view :class="['status', item.status === 0 ? 'on' : '']">{{
            item.status === "1" ? "已到账" : "未到账"
          }}</view>
        </view>
      </view>
    </view>

    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";

export default {
  components: {
    Shenhe,
  },

  data() {
    return {
      isShow: false,
      list: [],
      page: 1,
      isEnd: false,
      showMoney: true,
      type: -1,
      types: [
        { title: "全部", id: -1 },
        { title: "已释放", id: 1 },
        { title: "未释放", id: 0 },
      ],
      profit: "0.00",
      no_send_profit: "0.00",
      send_profit: "0.00",
    };
  },

  onShow() {
    this.clearData();
  },

  methods: {
    changeType(type) {
      this.type = type;
      this.isShow = false;
      this.clearData();
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.getData();
    },

    async getData() {
      let { list: oldList, page, type: status } = this;

      const res = await this.$allrequest.shareholder.frostList({
        page,
        status,
      });
      uni.stopPullDownRefresh();
      if (!res.code) {
        let { list, totalCount, profit, no_send_profit, send_profit } =
          res.data;

        this.profit = profit;
        this.no_send_profit = no_send_profit;
        this.send_profit = send_profit;
        if (list.length) {
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= totalCount) {
          this.isEnd = true;
        }
      }
    },

    onReachBottom() {
      if (this.isEnd) {
        return;
      }

      this.getData();
    },

    onPullDownRefresh() {
      this.clearData();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
}

.page-price {
  padding: 48rpx 52rpx;
  border-radius: 0px 0px 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;

  .hd {
    display: flex;
  }

  .hd-let {
    flex: 1;
    overflow: hidden;

    .iconfont {
      margin-left: 10rpx;
    }
  }

  .hd-rig {
    padding-top: 4rpx;
  }

  .em {
    padding-bottom: 4rpx;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 38rpx;
    color: #262626;
    font-weight: bold;

    &.num2 {
      font-size: 68rpx;
    }
  }

  .bd {
    display: flex;
    align-items: center;
    padding-top: 40rpx;

    .item {
      flex: 1;
      overflow: hidden;
    }
  }
}

.iconfont {
  position: relative;
  top: 4rpx;
  font-size: 36rpx;
  color: #8c8c8c;
}

.list {
  margin-top: 24rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .hd {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;

    .hd-let {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
      color: #262626;

      .time {
        font-size: 30rpx;
        font-weight: bold;
        color: #262626;
      }

      .iconfont {
        position: relative;
        top: -2rpx;
        color: #262626;
      }
    }

    .hd-rig {
      overflow: hidden;
      font-size: 24rpx;
      color: #8c8c8c;

      text {
        color: #f0250e;
      }
    }
  }

  .item {
    padding: 24rpx 0;
    border-top: 1rpx solid #f8f8f8;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .let {
        flex: 1;
        padding-right: 10rpx;
        overflow: hidden;
      }
    }
  }

  .item-hd {
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
  }

  .status {
    font-size: 24rpx;
    color: #8c8c8c;

    &.on {
      color: #f0250e;
    }
  }
}

.time {
  font-size: 24rpx;
  color: #8c8c8c;
}

.iconfont {
  display: inline-block;
}

.selectName {
  display: flex;
  align-items: center;
  color: #8c8c8c;

  .iconfont {
    margin-left: 10rpx;
    font-size: 40rpx;
    color: #8c8c8c;
  }
}

.selectPop {
  position: absolute;
  right: 10rpx;
  top: 74rpx;
  padding-top: 10rpx;
  width: 340rpx;

  &:after {
    content: "";
    position: absolute;
    right: 70rpx;
    top: 0;
    border-bottom: 10rpx solid #fff;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
  }

  .box {
    padding: 0 24rpx;
    background: #fff;
    box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.16);
    border-radius: 10rpx;
  }

  .item {
    padding: 0;
    height: 84rpx;
    line-height: 84rpx;
    overflow: hidden;
    color: #262626;
    font-size: 28rpx;
    border-bottom: 2rpx solid #f8f8f8;

    &:last-of-type {
      border-bottom: 0;
    }

    &.on {
      color: #f0250e;
    }
  }
}
</style>
